<template>
  <qh-page-view title="商品详情">
    <scroll-view scroll-y :scroll-with-animation="true" :scroll-top="scrollTop" @scroll="handleScroll"
      class="flex-column-100 details-box">
      <swiper v-if="banners.length || goods.video_url" class="swiper" indicator-dots="true"
        indicator-active-color="var(--primary-color)" :autoplay="autoplay" :interval="3000" :duration="1000"
        circular="true">
        <swiper-item v-if="goods.video_url">
          <!-- objectFit="contain" -->
          <video :src="goods.video_url" id="myVideo" muted show-mute-btn object-fit="cover" @ended="showBanner"
            :autoplay="playVideo" loop="false" class="myvideo"></video>
        </swiper-item>
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view class="goodsImg">
            <image mode="scaleToFill" @tap="seeBig(index)" :src="item"></image>
          </view>

        </swiper-item>
      </swiper>
      <view class="swiper" v-if="not_banners">
        <view class="goodsImg no-image">
          <text class="no-image-text">暂无图片</text>
        </view>
      </view>

      <!-- 商品介绍 -->
      <view class="bg box-sizing goodinfo-box">
        <view class="details-info">
          <view class="details-name">
            <text>{{ goods.goods_name }}</text>
          </view>
          <view v-if="goods.subheading" class="details-name" style="color: #9e9e9e;">
            <text>{{ goods.subheading }}</text>
          </view>
          <view class="viewc_inner_c">
            <view class="price_title">
              <template v-if="showPlusPrice() && user_type == 2">
                <text class="price">￥{{ goods.plus_price }}</text>
                <text v-if="showIntegral && Number(goods.plus_mem_integral) > 0" class="plus_integral">+{{
                  goods.plus_mem_integral }}{{ integral_name }}</text>
                <text class="plus-price-icon">PLUS</text>
              </template>
              <template v-else-if="showVipPrice() && user_type != 1">
                <text class="price">￥{{ goods.shop_mem_price }}</text>
                <text v-if="showIntegral && Number(goods.shop_mem_integral) > 0" class="plus_integral">+{{
                  goods.shop_mem_integral }}{{ integral_name }}</text>
                <text class="vip-price-icon">VIP</text>
              </template>
              <text :class="(showPlusPrice() && user_type == 2) ||
                (showVipPrice() && user_type != 1)
                ? 'price_pass'
                : 'price'
                ">￥{{ goods.online_price }}</text>
              <!-- <text
                class="preferential"
                v-if="!showPlusPrice() && goods.vip_online_state == 1"
                >{{ (vip.discount * 100) / 10 }}折</text
              > -->
            </view>

          </view>

          <view class="viewc_inner_c" v-if="goods.rebate > 0">
            <view class="price_title">
              <view class="flex-cn">
                <view class="temperature-box">
                  {{ goods.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                </view>
                <!-- <text class="plus-price-color" style="font-size: 36rpx;">￥</text>
                  <text class="plus-price-color"> {{ goods.rebate }}</text>
                  <text class="plus-price-icon">返福气值</text> -->
              </view>
            </view>
          </view>
          <text class="Deal">已出售 {{ goods.sell_num ? goods.sell_num : 0 }}</text>
          <text v-if="goods.goods_num <= 0" class="sold-out">已售空</text>
        </view>
        <view class="details-share" @tap="showShare">
          <text class="qh-rt-single qh-rt-fenxiang1-copy share-icon"></text>
          <!-- <image src="/static/images/share.png"></image> -->
          <text class="text-share">分享</text>
        </view>
      </view>

      <view v-if="goods.keywords_desc && goods.keywords_desc.length > 0" style="
          padding-left: 30rpx;
          padding-bottom: 16rpx;
          padding-right: 30rpx;
          background-color: #fff;
        ">
        <view style="padding-top: 10rpx; border-top: 1px solid #f2f3f5" class="bg goodinfo-box">
          <view class="tags-container">
            <block v-for="(val, i) in goods.keywords_desc" :key="i">
              <view class="tag_label" :style="{ 'padding-left': i === 0 ? '0' : '30rpx' }">
                <view style="
                    font-size: 26rpx;
                    font-weight: bold;
                    color: #000;
                    width: 100rpx;
                  ">{{ val.desc_1 }}</view>
                <view style="margin-top: 10rpx; width: 100rpx; height: 30rpx">{{
                  val.desc_2
                }}</view>
              </view>
            </block>
          </view>
        </view>
      </view>

      <!--plus会员引导-->
      <view class="Specifications bg vip-flex" v-if="
        user_type == 2 &&
        goods.plus_mem_status == 1 &&
        plus_register_state == 1
      ">
        <view>
          <text class="plus-title">{{ "PLUS会员已为您优惠" }}</text>
          <text class="discount-money">￥{{ total_less_money }}</text>
          <text class="deadline"> {{ plus_end_time }}到期</text>
        </view>
        <view class="vip-btn" @tap="toPlusHome">立即续费</view>
      </view>
      <!--普通用户引导-->
      <view class="Specifications bg vip-flex" v-if="
        user_type == 1 &&
        goods.shop_mem_status == 1 &&
        vip_register_state == 1
      ">
        <view>
          <text class="plus-title">{{ "会员价" }}</text>
          <text class="discount-money">￥{{ goods.shop_mem_price }}</text>
          <text v-if="showIntegral && Number(goods.shop_mem_integral) > 0" class="discount-money">
            +{{ goods.shop_mem_integral }}{{ integral_name }}</text>
        </view>
        <view class="vip-btn" @tap="toCard">注册会员</view>
      </view>
      <view class="Specifications bg vip-flex" v-if="
        user_type == 1 &&
        goods.plus_mem_status == 1 &&
        plus_register_state == 1
      ">
        <view>
          <text class="plus-title">{{ "PLUS会员价" }}</text>
          <text class="discount-money"> ￥{{ goods.plus_price }}</text>
          <text v-if="showIntegral && Number(goods.plus_mem_integral) > 0" class="discount-money">
            +{{ goods.plus_mem_integral }}{{ integral_name }}</text>
        </view>
        <view class="vip-btn" @tap="toPlusHome">开通PLUS</view>
      </view>
      <!-- vip用户引导 -->
      <view class="Specifications bg vip-flex" v-if="
        user_type == 3 &&
        goods.plus_mem_status == 1 &&
        plus_register_state == 1
      ">
        <view>
          <text class="plus-title">{{ "PLUS会员价" }}</text>
          <text class="discount-money"> ￥{{ goods.plus_price }}</text>
          <text v-if="showIntegral && Number(goods.plus_mem_integral) > 0" class="discount-money">
            +{{ goods.plus_mem_integral }}{{ integral_name }}</text>
        </view>
        <view class="vip-btn" @tap="toPlusHome">开通PLUS</view>
      </view>

      <!-- 配送方式 -->
      <view v-if="delivery_name" class="Specifications bg box-sizing fee-body">
        <text class="list-title fee-title">配送</text>
        <view>
          <text v-for="(item, index) in delivery_name" :key="index" class="SpecificationsText delivery-title">{{ item
            }}</text>
        </view>
      </view>

      <!-- 评价 -->
      <view class="CommentStyle bg" @tap="toComment">
        <view class="Comment-nav">
          <text class="Comment-nav-words">商品评价 ({{ commentTotal }})</text>
          <view class="Specifications-img">
            <image mode="aspectFit" src="/static/images/arrow-1.png"></image>
          </view>
        </view>
        <view class="content">
          <view class="Comment-detail" v-if="commentTotal > 0">
            <view class="userInfo">
              <image :src="commentInfo[0].avatar" mode="aspectFit" class="userImage"></image>
              <text class="nickName">{{ commentInfo[0].nickname }}</text>
            </view>
            <view class="Comment-con">
              <text class="Comment-con-words">{{
                commentInfo[0].content
              }}</text>
              <view class="Comment-con-img">
                <image v-for="(item, i) in commentInfo[0].evaluate_img" :key="i" :src="item" mode="aspectFit"
                  @tap.stop="scaleBig(i)">
                </image>
              </view>
            </view>
          </view>
          <view class="content-title" v-else>
            <text class="Comment-content">该商品暂无评价~</text>
          </view>
        </view>
      </view>
      <view class="shopDetails" v-if="goods.details">
        <view class="shopTitle">商品详情</view>
        <view class="wxParse">
          <jyf-parser :html="goods.details"></jyf-parser>
          <detail_describe></detail_describe>
        </view>
      </view>
    </scroll-view>


    <!-- 底部按钮 -->
    <view class="footer" :style="footerStyle">


      <view class="back-to-top" @tap="backToTop" v-if="showBackTop && !showInfo">
        <text class="zhiding feiIconfont icon-zhiding"></text>
      </view>

      <!-- <button class="kefu" open-type="contact" @contact="handleContact"> -->
      <button class="kefu" @click="handleContact">

        <image src="/static/images/kefu.png"></image>
        <text>客服</text>
      </button>

      <view class="sc sc2" @tap="toShoppingCar">
        <image src="/static/images/menu-icon-car-1.png"></image>
        <view class="badge-box" v-if="badgeText != 0">{{ badgeText }}</view>
        <text>购物车</text>
      </view>

      <view class="sc sc2" @click="dosc(goods.collect)">  
        <image :src="goods.collect == 1
          ? '/static/images/sc2.png'
          : '/static/images/sc.png'
          "></image>
        <text>{{ goods.collect == 1 ? "已收藏" : "收藏" }}</text>
      </view>

      <!-- <view class="details-btn"> 
				<view @tap="addToCar" class="btn_class buy">加入购物车</view>
			</view> -->

      <view class="details-btn">
        <view @tap="addToCar(goods)" class="btn_class buy" :class="{ toCarbuy: goods.goods_num <= 0 }">
          {{ goods.goods_num <= 0 ? "已售罄" : "加入购物车" }} </view>
        </view>

      </view>

      <!-- <view class="choose-sku-container" v-show="alertToggle">
			<view class="choose-sku-model" @tap="alertToggle = false"></view>
			<view class="choose-sku-box" :style="skuBoxStyle">
				<text class="qh-rt-single qh-rt-a-zu4416 choose-sku-close-icon" @tap="alertToggle = false"></text>
				<view class="choose-sku-title-box">
					<view class="choose-sku-goods-image">
						<qh-goods-image :src="skuImg" size="200" preview></qh-goods-image>
					</view>
					<view class="choose-sku-goods-title-right-box">
						<view class="choose-sku-goods-stock">
							<block v-if="company">单位: {{company}}</block>
						</view>
						<view class="choose-sku-goods-stock">
							<block v-if="specifications">{{specifications}}</block>
						</view>
						<view class="choose-sku-goods-stock">库存 {{skuNum}}</view>
						<view class="choose-sku-price-box">
							<view class="choose-sku-price-title">单价</view>
							<view style='margin-top: -3px;'>
								<view v-if="showSkuOnlinePrice()">
									<text class="choose-sku-price">￥{{skuPrice}}</text>
								</view>
								<view class="choose-sku-price flex-cn" v-if="showSkuVipPrice()">
									<text class="price-color">￥{{skuShopMemPrice}}</text>
									<text v-if="showIntegral && Number(skuShopMemIntegral) > 0"
										class="discount-money">+{{skuShopMemIntegral}}{{integral_name}}</text>
									<text class="vip-price-icon">VIP</text>
								</view>
								<view class="choose-sku-price flex-cn" v-if="showSkuPlusPrice()">
									<text class="plus-price-color">￥{{skuPlusPrice}}</text>
									<text v-if="showIntegral && Number(skuPlusIntegral) > 0" class="discount-money">+{{skuPlusIntegral}}{{integral_name}}</text>
									<text class="plus-price-icon">PLUS</text>
								</view>
							</view>
						</view>
					</view>
					<view class="choose-sku-attr-box" v-if="goods.attribute_state == 2">
						<view class="sku-container">
						<view
							v-for="(weight, index) in skuList"
							:key="index"
							:class="['sku-button', selectedWeightIndex === index ? 'sku-selected' : '', skuNum < parseInt(weight.id) ? 'sku-disabled' : '']"
							@click="selectWeight(weight,index)">
							{{ weight.name }}
							</view>
						</view>
					</view>
					<view class="choose-sku-change-con" :style="goods.attribute_state==2?'border-top:1rpx solid #eee;':'border:none'">
						<view class="choose-sku-change-tag">数量</view>
						<view class="choose-sku-change border">
							<text class="qh-rt-single qh-rt-a-zu4424 choose-sku-change-icon" @click.stop="jian"></text>
							<view class="choose-sku-num">
								<input min="1" type="number" @blur="blurNum" :value="buyNum" placeholder="1" placeholder-class="choose-sku-p"></input>
							</view>
							<text class="qh-rt-single qh-rt-jia1 choose-sku-change-icon" @click.stop="jia"></text>
						</view>
					</view>
				</view>
			</view>
		</view> -->



      <view v-if="showInfo" class="backShadow" @click.self="closePopup">
        <view class="sku_goods-content" :class="{ animated: showInfo && !slideOut, 'slide-out': slideOut }">
          <view class="info_app" @click.stop>
            <view class="sku_container" :style="skuBoxStyle">
              <view class="sku_modal">
                <view class="sku_header">
                  <text class="sku_title">请选择商品规格</text>
                  <text class="sku_close-btn" @click="closePopup">×</text>
                </view>
                <view class="sku_product-info">
                  <!--banners[0] ? banners[0] : goods.goods_img-->
                  <image class="sku_product-image" :src="displayImage"></image>
                  <view class="sku_product-details">
                    <text class="sku_product-name">{{ goods.goods_name }}</text>

                    <view class="sku_tags">
                      <text class="sku_tag">{{ goods.subheading }}</text>
                    </view>

                    <view class="choose-sku-price-box" v-if="goods.attribute_state == 2">
                      <view class="choose-sku-price-title">单价</view>
                      <view style='margin-top: -3px;'>
                        <!-- <view class="choose-sku-price flex-cn" v-if="showSkuPlusPrice()">
                        <text class="plus-price-color">￥{{skuPlusPrice}}</text>
                        <text v-if="showIntegral && Number(skuPlusIntegral) > 0" class="discount-money">+{{skuPlusIntegral}}{{integral_name}}</text>
                        <text class="plus-price-icon">PLUS</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="showSkuVipPrice()">
                        <text class="price-color">￥{{skuShopMemPrice}}</text>
                        <text v-if="showIntegral && Number(skuShopMemIntegral) > 0"
                          class="discount-money">+{{skuShopMemIntegral}}{{integral_name}}</text>
                        <text class="vip-price-icon">VIP</text>
                      </view> -->
                        <view v-if="showSkuOnlinePrice()">
                          <text class="choose-sku-price">￥{{ skuPrice }}</text>
                        </view>
                        <view class="choose-sku-price flex-cn" v-if="goods.rebate > 0">
                          <view class="temperature-box">
                            {{ goods.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                          </view>
                          <!-- <text class="plus-price-color">￥</text>
                          <text class="plus-price-color" style="font-size: 22rpx;"> {{ goods.rebate }}</text>
                          <text class="plus-price-icon">返福气值</text> -->
                        </view>
                      </view>
                    </view>

                    <view class="choose-sku-price-box" v-if="goods.attribute_state == 1">
                      <view class="choose-sku-price-title">单价</view>
                      <view style="margin-top: -3px">
                        <view v-if="showOnlinePrice(goods)">
                          <text class="choose-sku-price sku_price">￥{{ goods.online_price }}</text>
                        </view>
                        <!-- <view class="choose-sku-price flex-cn" v-if="showVipPrice(goods)">
                        <text class="price-color">￥{{ goods.shop_mem_price }}</text>
                        <text class="vip-price-icon">VIP</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="showPlusPrice(goods)">
                        <text class="plus-price-color">￥{{ goods.plus_price }}</text>
                        <text class="plus-price-icon">PLUS</text>
                      </view> -->
                        <view class="choose-sku-price flex-cn" v-if="goods.rebate > 0">
                          <view class="temperature-box">
                            {{ goods.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                          </view>
                          <!-- <text class="plus-price-color">￥</text>
                          <text class="plus-price-color" style="font-size: 22rpx;"> {{ goods.rebate }}</text>
                          <text class="plus-price-icon">返福气值</text> -->
                        </view>
                      </view>
                    </view>


                  </view>
                </view>
                <view class="sku_size-selection">
                  <view class="sku_size-options">
                    <view v-for="(size, Sindex) in skuList" :key="Sindex" :class="[
                      'sku_size-option',
                      {
                        sku_selected: sku_select_id === size.id,
                        sku_disabled: size.disabled,
                      },
                    ]" @click="selectSize(size)">
                      <text v-if="size.disabled" class="sku_size-text sku_disabled-text">{{ size.name }}</text>
                      <text v-else>{{ size.name }}</text>
                      <text v-if="size.disabled" class="sku_out-of-stock">缺货</text>
                    </view>
                  </view>
                </view>

                <view class="sku_size-options" v-if="surplus && surplus <= 10">
                  <text style="font-size: 24rpx;color: red;">仅剩余{{ surplus }}件</text>
                </view>

                <view class="sku_quantity-selection">
                  <view style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  ">
                    <text class="sku_quantity-title">数量</text>
                    <view class="sku_quantity-control">

                      <text class="qh-rt-single qh-rt-a-zu4424 choose-sku-change-icon" @click.stop="jian"></text>
                      <input style="width: 100rpx;text-align: center;" min="1" type="number" @blur="blurNum"
                        :value="buyNum" placeholder="1" placeholder-class="choose-sku-p"></input>

                      <text class="qh-rt-single qh-rt-jia1 choose-sku-change-icon" @click.stop="jia"></text>
                    </view>
                  </view>
                </view>


              </view>
            </view>


          </view>
        </view>
      </view>


      <block>
        <share v-if="isShowShare" @close="closeShowShare" :share="share"></share>

        <view class="canvas-box">
          <!-- #ifdef MP-WEIXIN -->
          <canvas class="mycanvas" canvas-id="mycanvas"></canvas>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <canvas class="mycanvas" id="mycanvas"></canvas>
          <!-- #endif -->
        </view>
      </block>
  </qh-page-view>
</template>

  <script>
  const app = getApp().globalData;
  import share from "@/components/share.vue";
  import detail_describe from "./detail_describe.vue";
  export default {
    components: {
      share,
      detail_describe
    },
    data() {
      return {
        single_size: false,
        single: false,
        surplus: null,
        sku_select_id: null,
        showInfo: false,
        slideOut: false,
        selecteditem: null,
        promotion_price: "",
        sku_promotion_status: "",
        skuNum: "",
        company: "单位",
        specifications: "规格",
        sc: "/static/images/sc.png",
        scText: "",
        collect: 0,
        not_banners: 0,
        goods_id: "",
        goods: {
          online_price: "",
          sell_num: "",
        },
        banners: [],
        delivery_name: [],
        commentInfo: [],

        autoplay: true,
        playVideo: true,

        user_type: 1,
        //用户权益
        share: {
          maskShare: false,
          //分享弹窗
          maskHidden: false, //海报图片,
          type: 5,
          data: "",
          goods_id: "",
        },
        vip: null,
        commentTotal: 0,

        isShowShare: false,
        isShowShareData: {
          goods: "",
          goods_img: "",
          goods_id: "0",
        },

        total_less_money: "", //共计优惠金额
        plus_end_time: "", //plus会员到期时间

        vip_register_state: "", // 为0 关闭 为1 开启  引导成为vip按钮
        plus_register_state: "", //为0 关闭  为1 开启  引导续费/成为plus按钮

        //规格
        alertToggle: false,
        selectSkuDetailId: null,
        buyNum: 1,
        skuSelectIndex: [],
        shopItemInfo: {},
        selectArr: [],
        skuImg: "",
        skuList: [],
        skuPrice: "",
        skuShopMemPrice: "",
        skuPlusPrice: "",
        skuShopMemIntegral: 0,
        skuPlusIntegral: 0,
        skuDetailList: [],

        isOnloaded: false,
        integral_name: "",
        selectedWeightIndex: null,
        sizeIndex: null,
        currentImage: null,   //规格图片的计算
        scrollTop: 0,
        oldScrollTop: 0,
        showBackTop: false
      };
    },

    computed: {
      displayImage() {
        if (!this.showInfo || !this.currentImage) {
          return this.goods.goods_img
        }
        return this.currentImage;
      },
      badgeText() {
        return this.$store.merShoppingGoodsList.length;
      },
      footerStyle() {
        let h = this.$store.bottomHeight + 110;
        return (
          "height:" + h + "rpx;padding-bottom:" + this.$store.bottomHeight + "rpx"
        );
      },
      skuBoxStyle() {
        //   return "margin-bottom:" + (this.$store.bottomHeight + 110) + "rpx";
        return "margin-bottom:" + (this.$store.bottomHeight + 110) + "rpx";
      },
      showIntegral() {
        return (
          this.$store.integral_arrive_cash == 1 &&
          this.$store.marketing_methods == 2
        );
      },
    },
    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
      // this.scFun()
      await this.$onLaunched;
      /**
       * &share_uid => &su	分享人uid
       * */
      // #ifdef MP-ALIPAY
      if (JSON.stringify(options) == "{}") {
        options = my.getLaunchOptionsSync().query;
      }
      // #endif

      // #ifdef MP-WEIXIN
      if (!options.id) {
        options = getApp().globalData.getOnLaunchParam(options);
      }
      // #endif

      if (options && options.id) {
        this.goods_id = options.id;
      }
      this.share.goods_id = options.id;

      await this.getVipDisCount();

      await this.getDetail();

      if (this.$store.merShoppingGoodsList.length) {
        this.$mutations.getShopList();
      }

      this.plus_register_state = app.XcxData.plus_register_state;
      this.vip_register_state = app.XcxData.vip_register_state;
      this.isOnloaded = true;
    },
    onShow() {
      this.integral_name = this.$store.integral_name;
      if (this.isOnloaded) {
        this.getVipDisCount();
      }
    },
    onShareAppMessage(res) {
      return {
        title: this.goods.goods_name,
        path:
          "/pages/mer/goods/details/details?id=" +
          this.goods_id +
          "&share_uid=" +
          this.$store.userInfo.uid,
        imageUrl: this.goods.goods_img,
      };
    },



    methods: {
      handleScroll(e) {
        console.log("page scroll:", e.detail.scrollTop);

        // 获取滚动距离
        const scrollTop = e.detail.scrollTop

        // 显示/隐藏回到顶部按钮
        this.showBackTop = scrollTop > 300

        // 记录旧的滚动位置
        this.oldScrollTop = scrollTop
      },


      // 监听页面滚动
      backToTop(e) {
        this.scrollTop = this.oldScrollTop
        // 在下一个时间片再设置为0，确保滚动生效
        setTimeout(() => {
          this.scrollTop = 0
        }, 10)
        // this.showBackTop = e.detail.scrollTop > 200; // 根据滚动位置显示或隐藏返回顶部按钮
      },

      // 客服
      handleContact() {
        uni.navigateTo({
          url: "/pages/mer/goods/details/contact",
        });
      },


      //规格
      selectSize(size) {

        console.log(size, '123213')
        if (size.goods_img) {
          this.currentImage = size.goods_img;
        } else {
          this.currentImage = this.goods.goods_img;
        }
        if (!this.skuList.find((s) => s.id === size.id).disabled) {
          this.sku_select_id = size.id;
          this.selectSkuDetailId = size.id;
          this.surplus = size.goods_num;
          this.skuPrice = size.online_price;
          this.goods.rebate = size.rebate;
        }
      },

      handlerApply() {
        this.showInfo = true;
        this.slideOut = false;
      },

      closePopup() {
        this.slideOut = true;
        this.sku_select_id = null;
        this.surplus = null;
        this.sku_select_id = null;
        this.buyNum = 1;
        this.sizeIndex = null;
        this.currentImage = null
        setTimeout(() => {
          this.showInfo = false;
          this.slideOut = false;
        }, 500); // 500ms 是动画的持续时间
      },

      selectWeight(val, index) {
        this.selectedWeightIndex = index;
        this.selectSkuDetailId = val.id;
      },

      async dosc(isCollected) {
        let that = this;
        if (isCollected == 0) {
          try {
            const response = await this.$request(
              "/SmallProgramApi/Collect/addCollect",
              { goods_id: this.goods_id, store_id: this.$store.mallStoreId }
            );
            if (response.status == 1) {
              uni.showToast({
                title: response.msg,
                icon: "none",
              });
              that.goods.collect = 1; // 修改为 goods.collect
              that.scFun(that.goods.collect); // 修改为 goods.collect
            } else {
              uni.showToast({
                title: response.msg,
                icon: "none",
              });
            }
          } catch (error) {
            console.error(error);
          }
        } else {
          try {
            const response = await this.$request(
              "/SmallProgramApi/Collect/cancelCollect",
              { goods_id: this.goods_id, store_id: this.$store.mallStoreId }
            );
            if (response.status == 1) {
              uni.showToast({
                title: response.msg,
                icon: "none",
              });
              that.goods.collect = 0; // 修改为 goods.collect
              that.scFun(that.goods.collect); // 修改为 goods.collect
            } else {
              uni.showToast({
                title: response.msg,
                icon: "none",
              });
            }
          } catch (error) {
            console.error(error);
          }
        }
      },

      scFun(collect) {
        let sc1 = "/static/images/sc.png";
        let sc2 = "/static/images/sc2.png";

        if (collect == 1) {
          this.sc = sc2;
          this.scText = "已收藏";
        } else {
          this.sc = sc1;
          this.scText = "收藏";
        }
      },

      // 展示plus会员价条件
      showPlusPrice() {
        return app.showPlusPrice(this.goods);
      },
      // 展示会员价条件
      showVipPrice() {
        return app.showVipPrice(this.goods);
      },
      // 展示普通价格
      showOnlinePrice() {
        return app.showOnlinePrice(this.goods);
      },
      // 展示plus会员价条件
      showSkuPlusPrice() {
        return app.showPlusPrice({
          shop_mem_status: this.goods.shop_mem_status,
          plus_mem_status: this.goods.plus_mem_status,
          shop_mem_price: this.skuShopMemPrice,
          plus_price: this.skuPlusPrice,
          online_price: this.skuPrice,
        });
      },
      // 展示会员价条件
      showSkuVipPrice() {
        return app.showVipPrice({
          shop_mem_status: this.goods.shop_mem_status,
          plus_mem_status: this.goods.plus_mem_status,
          shop_mem_price: this.skuShopMemPrice,
          plus_price: this.skuPlusPrice,
          online_price: this.skuPrice,
        });
      },
      // 展示普通价格
      showSkuOnlinePrice() {
        return app.showOnlinePrice({
          shop_mem_status: this.goods.shop_mem_status,
          plus_mem_status: this.goods.plus_mem_status,
          shop_mem_price: this.skuShopMemPrice,
          plus_price: this.skuPlusPrice,
          online_price: this.skuPrice,
        });
      },
      //轮播视频加载完触发事件
      showBanner() {
        this.autoplay = true;
      },
      // 加
      jia() {
        console.log(this.goods.attribute_state, "this.goods.attribute_state");
        if (this.goods.attribute_state == 2) {
          if (!this.sku_select_id) {
            uni.showToast({
              title: "请选择规格",
              icon: "none",
            });
            return;
          }

          if (this.buyNum >= this.surplus) {
            uni.showToast({
              title: "库存不足",
              icon: "none",
            });
            return;
          } else {
            this.buyNum++;
          }
        } else {
          if (this.buyNum >= this.goods.goods_num) {
            uni.showToast({
              title: "库存不足",
              icon: "none",
            });
            return;
          } else {
            this.single = true;
            this.buyNum++;
          }
        }
      },
      // 减
      jian() {
        if (this.buyNum > 1) {
          this.buyNum--;
        }
      },
      blurNum(e) {
        let num = e.detail.value;
        if (num == "" || num < 0) {
          this.buyNum = 1;
        } else {
          this.buyNum = e.detail.value;

          if (this.buyNum > 0) {
            this.single = true;
          }

          console.log(e.detail.value, " e.detail.value;");
        }
      },
      //多规格购物车选中的状态
      checkToCart() {
        this.$store.checkedList.push({
          goods_id: this.goods_id,
        });
        this.$store.checkedList = this.uniqueArray(
          this.$store.checkedList,
          "goods_id"
        );
      },

      //加入购物车
      async addToCar(goods) {

        let res = null;
        //多规格
        if (this.goods.attribute_state == 2) {

          if (!this.selectSkuDetailId && this.buyNum > 1) {
            uni.showToast({
              title: "请选择商品规格",
              icon: "none",
            });
            return;
          }

          this.sizeIndex = this.$store.merShoppingGoodsList.findIndex((item) => {
            return (
              item.goods_id === this.goods_id &&
              this.selectSkuDetailId === item.sku_id
            );
          });

          if (this.sizeIndex !== -1) {
            //更新购物车
            // let Indexnum =
            //   this.$store.merShoppingGoodsList[this.sizeIndex].num + this.buyNum;
            let Indexnum = Number(this.$store.merShoppingGoodsList[this.sizeIndex].num) + Number(this.buyNum);
            this.handlerApply();
            if (!this.sku_select_id) return;
            let obj = {
              goods_id: this.goods_id,
              sku_id: this.selectSkuDetailId,
              num: Indexnum,
            };

            res = this.$mutations.setShoppingCar(obj);
          } else {
            this.handlerApply();
            if (!this.sku_select_id) return;
            res = await this.$mutations.setShoppingCar({
              goods_id: this.goods_id,
              sku_id: this.selectSkuDetailId,
              num: this.buyNum,
            });
          }
          if (res) {
            uni.showToast({
              title: "加入购物车成功",
              icon: "none",
            });
            this.closePopup();
            this.checkToCart();
          }
        }
        //单规格
        if (this.goods.attribute_state == 1) {
          if (!this.showInfo) return this.showInfo = true;

          this.sizeIndex = this.$store.merShoppingGoodsList.findIndex((item) => {
            return (
              item.goods_id === this.goods_id
            );
          });

          if (this.sizeIndex !== -1) {
            //更新购物车
            let obj = {
              goods_id: this.goods_id,
              num: Number(this.$store.merShoppingGoodsList[this.sizeIndex].num) + Number(this.buyNum),
            };
            console.log(obj, '什么对象啊')
            this.$mutations.setShoppingCar(obj).then((response) => {
              if (response) {
                uni.showToast({
                  title: "加入购物车成功",
                  icon: "none",
                });
                this.closePopup();
                this.checkToCart();
              }
            });

          } else {
            res = await this.$mutations.setShoppingCar({
              goods_id: this.goods_id,
              num: this.buyNum,
            });

            if (res) {
              uni.showToast({
                title: "加入购物车成功",
                icon: "none",
              });
              this.closePopup();
              this.checkToCart();
            }
          }

        }
      },
      // 自定义去重函数，针对对象类型的元素
      uniqueArray(arr, prop) {
        return arr.filter(
          (obj, index, self) =>
            index === self.findIndex((t) => t[prop] === obj[prop])
        );
      },
      toPlusHome() {
        uni.navigateTo({
          url: "/pages/mine/plusHome/plusHome",
        });
      },
      toCard() {
        uni.navigateTo({
          url: "/pages/mine/card/card",
        });
      },
      // 跳转到评价列表页
      toComment() {
        uni.navigateTo({
          url:
            "/pages/order/commentList/comment" +
            "?type=1&goods_id=" +
            this.goods_id,
        });
      },
      toShoppingCar() {
        uni.navigateTo({
          url: "/pages/mer/goods/shoppingCar/shoppingCar",
        });
      },
      closeShowShare() {
        this.share.maskShare = false;
        this.isShowShare = false;
      },
      //点击分享
      showShare() {
        this.share.maskShare = true;
        this.share.maskHidden = false;
        this.share.data = this.isShowShareData;
        this.isShowShare = true;
      },

      //查看大图
      seeBig(index) {
        uni.previewImage({
          current: this.banners[index],
          urls: this.banners, // 需要预览的图片http链接列表
        });
      },
      cratedSku() {
        let skuDetailList = this.skuDetailList;
        let shopItemInfo = {};

        for (let i in skuDetailList) {
          shopItemInfo[skuDetailList[i].sku_id_list] = skuDetailList[i];
        }

        this.shopItemInfo = shopItemInfo;
        this.checkItem();
      },
      checkSku(e) {
        let pIndex = e.currentTarget.dataset.pIndex;
        let cIndex = e.currentTarget.dataset.cIndex;
        let skuList = this.skuList;
        let skuSelectIndex = this.skuSelectIndex;
        let selectArr = this.selectArr;

        if (selectArr[pIndex] != skuList[pIndex].list[cIndex].id) {
          selectArr[pIndex] = skuList[pIndex].list[cIndex].id;
          skuSelectIndex[pIndex] = cIndex;
        } else {
          selectArr[pIndex] = 0;
          skuSelectIndex[pIndex] = -1;
        }

        this.setData({
          selectArr: selectArr,
          skuSelectIndex: skuSelectIndex,
        });
        this.$forceUpdate();
        this.checkItem();
      },
      checkItem() {
        let option = this.skuList;
        let selectArr = this.selectArr;
        let result = []; //定义数组存储被选中的值

        for (let i in option) {
          result[i] = selectArr[i] ? selectArr[i] : 0;
        }

        for (let i in option) {
          let last = result[i];

          for (let k in option[i].list) {
            result[i] = option[i].list[k].id;
            option[i].list[k].status = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
          }

          result[i] = last;
        }

        this.skuList = option;

        if (selectArr.indexOf(0) == -1) {
          let id_list = selectArr.join(",");

          let sku = this.shopItemInfo[id_list];
          this.selectSkuDetailId = sku.sku_id;
          this.skuPrice = sku.online_price;
          this.skuShopMemPrice = sku.shop_mem_price;
          this.skuShopMemIntegral = sku.shop_mem_integral;
          this.skuPlusIntegral = sku.plus_mem_integral;
          this.skuImg = sku.path ? sku.path : this.goods.path;
          this.skuPlusPrice = sku.plus_price;
        } else {
          // this.selectSkuDetailId = -1;
          this.selectSkuDetailId = null;
          this.skuPrice = this.goods.online_price;
          this.skuShopMemPrice = this.goods.shop_mem_price;
          this.skuImg = this.goods.goods_img;
          this.skuPlusPrice = this.goods.plus_price;
          this.skuShopMemIntegral = this.goods.shop_mem_integral;
          this.skuPlusIntegral = this.goods.plus_mem_integral;
        }
      },
      isMay(result) {
        for (let i in result) {
          if (result[i] == 0) {
            return 1;
          }
        }

        let sku = this.shopItemInfo[result];

        if (sku && sku.sku_id >= 0) {
          return 1;
        } else {
          return 0;
        }
      },
      //获取会员折扣
      async getVipDisCount() {
        if (this.$store.userInfo.type == 1) return (this.vipDiscount = 1);
        const { status, data } = await this.$request(
          "SmallProgramApi/Vip/getVipDetails",
          {
            plus_coupon_show: 1,
          }
        );
        if (status == 1) {
          this.vip = data;
          this.vipDiscount = data.discount;
          this.user_type = data.user_type;
          this.plus_end_time = data.plus_end_time;
          this.total_less_money = data.total_less_money;
        }
      },
      //过滤配送
      getDeliveryType(delivery_type) {
        let typeMap = {
          1: "自提",
          2: "同城配送",
          3: "快递配送(48小时内发货)",
        };
        let result = delivery_type
          .split(",")
          .map((type) => typeMap[type])
          .filter(Boolean);
        return result.length > 0 ? result : [];
      },
      //获取商品详情
      async getDetail() {
        if (!this.goods_id) return;
        const {
          status,
          data,
          skuList,
          skuDetailList,
          message,
          // } = await this.$request('SmallProgramApi/MerchantGoods/getGoodsInfo', {
        } = await this.$request("SmallProgramApi/Goods/getGoodsDetails", {
          // SmallProgramApi/Goods/getGoodsDetails
          id: this.goods_id,
          store_id: this.$store.mallStoreId,
        });

        if (status != 1)
          return uni.showModal({
            title: "提示",
            content: res.msg,
            complete: (res) => {
              uni.navigateBack({
                delta: 1,
              });
            },
          });
        (this.specifications = data.specifications ? data.specifications : ""),
          (this.company = data.company ? data.company : ""),
          (this.skuNum = parseFloat(data.goods_num));

        this.goods = data;

        //这里给他添加一个disabled
        if (skuDetailList) {
          skuDetailList.forEach((item) => {
            const goodsNum = parseInt(item.goods_num);
            item.disabled = goodsNum <= 0;
          });
          this.skuList = skuDetailList;
        }

        data.id = data.goods_id;
        data.goods_img = data.goods_img;
        this.isShowShareData = {
          goods: data,
          goods_img: data.goods_img ? data.goods_img : "",
          goods_id: this.goods_id,
          text: data.goods_name ? data.goods_name : "",
        };

        this.skuPrice = this.goods.online_price;
        this.skuShopMemPrice = this.goods.shop_mem_price;
        this.skuImg = this.goods.goods_img;
        this.skuPlusPrice = this.goods.plus_price;
        this.skuShopMemIntegral = this.goods.shop_mem_integral;
        this.skuPlusIntegral = this.goods.plus_mem_integral;

        this.getcommentList();

        this.delivery_name = this.getDeliveryType(data.delivery_type);



        if (data.banners.length) {
          this.banners = data.banners;

          if (this.goods.video_url) {
            this.autoplay = false;
            this.playVideo = true;
          } else {
            this.autoplay = true;
            this.playVideo = false;
          }
        } else if (data.goods_img) {
          this.banners = [data.goods_img];
        } else {
          this.not_banners = 1;
        }

        if (data.sku_detail_list && data.sku_attr_list) {
          let skuSelectIndex = [];
          let selectArr = [];

          for (let i = 0; i < data.sku_attr_list.length; i++) {
            skuSelectIndex.push(-1);
            selectArr.push(0);
          }

          this.setData({
            skuList: skuList,
            skuDetailList: data.sku_detail_list,
            skuSelectIndex: skuSelectIndex,
            selectArr: selectArr,
            skuImg: data.goods_img,
          });
          this.cratedSku();
        }
      },
      //查看评价大图
      scaleBig(index) {
        uni.previewImage({
          current: this.commentInfo[0].evaluate_img[index],
          urls: this.commentInfo[0].evaluate_img, // 需要预览的图片http链接列表
        });
      },
      //获取商品评价
      async getcommentList() {
        const { status, data } = await this.$request(
          "SmallProgramApi/OrderEvaluate/getMerchantGoodsEvaluate",
          {
            goods_id: this.goods_id,
            page: 1,
            limit: 1,
          }
        );
        if (status == 1) {
          this.commentInfo = data.list;
          this.commentTotal = data.count;
        }
      },
    },

  };
</script>
  <style>
  @import "./details.css";
  @import "./sku_details.scss";

  .temperature-box {
    background-color: #C39646;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    color: #FFFFFF;
    /* 白色文字 */
    font-size: 20rpx;
    /* 文字大小 */
    margin-top: 16rpx;
    height: 28rpx;
    text-align: center;
    padding: 5rpx;
    line-height: 28rpx;
  }

  .tags-container {
    display: flex;
    align-items: center;
    /* width: 97%; */
    overflow: hidden;
    position: relative;
    /* justify-content: center; */
  }

  .tag_label {
    padding: 0rpx 40rpx;
    padding-right: 55rpx;
    position: relative;
    color: #9e9e9e;
    font-size: 11px;
    white-space: nowrap;
    text-align: center;
  }

  .tag_label:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    border-right: 1px solid #f2f3f5;
  }

  .myvideo {
    width: 100%;
    height: 100%;
  }

  .buy {
    border-radius: 50rpx;
  }

  .sku-container {
    display: flex;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    gap: 15rpx;
    align-items: center;
    padding: 10rpx;
  }

  .sku-button {
    flex: 1 0 auto;
    /* max-width: 60px;  */
    /* height: 30px; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #f5f5f5;
    color: #000;
    font-size: 14px;
    cursor: pointer;
  }

  .sku-button.sku-selected {
    border: 1rpx solid #ffa500;
    background-color: #fff3e0;
    color: #ffa500;
  }

  .sku-button.sku-disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
  }

  .back-to-top {
    position: fixed;
    left: 632rpx;
    bottom: 180rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  }

  .back-to-top .zhiding {
    font-size: 40rpx;
    color: #666;
  }
</style>